<template>
	<view class="uni_box home">
		<navbar title='安全中心' :yin="false">
		</navbar>
		<view class="content">
			<view class="mpone">
				<view class="touview" @click="upload">
					<image class="tou2" :src="headimg?headimg:mineinfo.profile.avatar" />
					<image class="xj" src="/static/img/xj.png" />
				</view>
				
				<view class="mpright">
					<text class="yxname">邮箱：{{mineinfo.profile.email}}</text>
					<view class="dengview">
						<text class="idnum">ID:{{mineinfo.profile.id}}</text>
						<text class="dengji" v-if="mineinfo.profile.level!=0">{{ mineinfo.profile.level_name }}</text>
					</view>
				</view>
			</view>
			<view class="qian">
				<text class="qbiao"></text>
				<text class="qname">修改登录密码</text>
			</view>
			<view class="uone">
				<view class="uhead">
					<text class="uname">邮箱</text>
				</view>
				<view class="ushuru">
					<u-input v-model="mineinfo.profile.email" disabled type="text" :border="false" placeholder="请输入"/>
				</view>
			</view>
			<view class="uone">
				<view class="uhead">
					<text class="uname">新密码</text>
				</view>
				<view class="ushuru">
					<u-input v-model="passwd" type="password" :border="false" placeholder="请输入"/>
				</view>
			</view>
			<view class="uone">
				<view class="uhead">
					<text class="uname">确认密码</text>
				</view>
				<view class="ushuru">
					<u-input v-model="passwd_confirmation" type="password" :border="false" placeholder="请输入"/>
				</view>
			</view>
			<view class="uone">
				<view class="uhead">
					<text class="uname">邮箱验证码</text>
				</view>
				<view class="ushuru">
					<u-input v-model="code" type="text" :border="false" placeholder="请输入"/>
					<view class="huoqu" @click="getcode" v-if="isTimer">{{time}}s</view>
					<view class="huoqu" @click="getcode" v-else>获取</view>
				</view>
			</view>

			<view class="sbotview">
				<view class="btn" @click="getpsdedit">确认修改</view>
			</view>
		</view>

		<u-select v-model="bshow" :list="blist" @confirm="bconfirm"></u-select>
	</view>
</template>

<script>
import {
		baseUrl
	} from '@/utils/config.js';
	export default {
		data() {
			return {
				value:'',
				wang:'',
				bshow:false,
				blist:[
					{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				mineinfo:{
					profile:{
						avatar:'',
						email:''
					}
				},
				passwd:'',
				passwd_confirmation:'',
				code:'',

				timer: null,
				time: 60,
				isTimer: false,
				headimg:'',
				head_portrait:'',//传给接口
			}
		},
		onLoad() {
			this.getuserinfo()
		},
		onShow() {
		},
		methods: {
			upload(e) {
				// this.updatetype = e
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.headimg = tempFilePaths[0];
						// this.isClick = true;
						this.unloadtou()
						// this.getavatar();//修改信息
					}
				});
			},
			unloadtou(){
				// console.log(this.head_portrait)
				let that = this
				uni.uploadFile({
					// url: baseUrl + '/api/uploadImage', //仅为示例，非真实的接口地址
					url: baseUrl + '/api/edit_user', //仅为示例，非真实的接口地址
					filePath: this.headimg,
					name: 'avatar',
					header: {
						// 'content-type': 'application/json;charset=UTF-8',
						'Authorization': 'Bearer '+uni.getStorageSync('token'),
					},
					formData: {
						'Authorization':'Bearer '+uni.getStorageSync('token'),
					},
					success: (uploadFileRes) => {
						console.log( JSON.parse(uploadFileRes.data).data);
						if(JSON.parse(uploadFileRes.data).success == 200){
							that.head_portrait = JSON.parse(uploadFileRes.data).data
							// that.getavatar();//修改信息
							that.getuserinfo();//刷新接口
							// that.user.head_portrait = JSON.parse(uploadFileRes.data).data.src
						}else{
							that.$u.toast(JSON.parse(uploadFileRes.data).message);
						}
						// that.getinfo()
					}
				});
			},
			async getavatar(){
				let res = await this.$u.api.edit_user({
					avatar:this.headimg
				});
				this.$u.toast("上传成功");
			},
			async getuserinfo(){
				let res = await this.$u.api.userinfo({
				});
				this.mineinfo = res
			},
			async getpsdedit(){
				if(!this.passwd){
					this.$u.toast("请输入密码");
					return false;
				}
				if(!this.passwd_confirmation){
					this.$u.toast("请输入确认密码");
					return false;
				}
				if(!this.code){
					this.$u.toast("请输入邮箱验证码");
					return false;
				}
				if(this.passwd.length<8){
					this.$u.toast('密码最小长度为8位');
					return false
				}
				if(this.passwd != this.passwd_confirmation){
					this.$u.toast('确认两次密码是否一致');
					return false
				}
				let res = await this.$u.api.editPasswd({
					passwd:this.passwd,
					passwd_confirmation:this.passwd_confirmation,
					code:this.code,
					// type:'RESET_PASS'
				});
				this.$u.toast("操作成功");
				console.log(res)
			},
			xuanwang(){
				this.bshow = true
			},
			bconfirm(e){
				console.log(e)
				this.wang = e[0].value
			},
			getrightClick(){
				this.navrouter("/pages/TPage/BiRecord?type=2");
			},
			async getcode(){
				if(!this.mineinfo.profile.email){
					this.$u.toast("请输入邮箱");
					return false;
				}
				this.isTimer = true;
				this.timer = setInterval(() => {
					this.time--
					if (this.time < 0) {
						this.isTimer = false;
						this.time = 60;
						clearInterval(this.timer);
					};
				}, 1000);
				let res = await this.$u.api.sendEmail({
					email: this.mineinfo.profile.email,
					type:'RESET_PASS'
				});
				// console.log(res)
				this.$u.toast("发送成功");
			}

		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.chongji{
		width: 38rpx;
		height: 36rpx;
	}
	.content{
		background-color: #fff;
		padding: 30rpx 38rpx;
		.mpone{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 80rpx;
			.touview{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 30rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.tou2{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				position: absolute;
			}
			.xj{
				position: relative;
				z-index: 1;
				width: 42rpx;
				height: 38rpx;
			}
			.mpright{
				flex: 1;
				display: flex;
				flex-direction: column;
				.yxname{
					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
				}
				.dengview{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 10rpx;
					.idnum{
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						display: inline-block;
						margin-right: 13rpx;
					}
					.dengji{
						padding: 5rpx 30rpx;
						background: #FF8004;
						border-radius: 14rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
			}
		}
		.qian{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 45rpx;
			.qbiao{
				display: inline-block;
				width: 8rpx;
				height: 36rpx;
				background: #FF8004;
				margin-right: 8rpx;

			}
			.qname{
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
			}
		}
		.uone{
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
			.uhead{
				display: flex;
				flex-direction: row;
				align-items: center;

			}
			.usdt{
				width: 46rpx;
				height: 46rpx;
				margin-right: 12rpx;
			}
			.uname{
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
		}
		.ushuru{
			padding: 10rpx 25rpx;
			background: #F7F7F7;
			border-radius: 20rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: row;
			min-height: 80rpx;
			/deep/.u-input__input{
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}
			.xuantit{
				color: #c0c4cc;
			}
			.xactive{
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}
			.xia{
				margin-left: auto;
				width: 16rpx;
				height: 10rpx;
			}
			.quanbu{
				margin-left: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #010101;
			}
			.huoqu{
				padding: 8rpx 28rpx;
				margin-left: 30rpx;
				background: rgba(255, 128, 4, 1);
				border-radius: 50rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.keyong{
			display: block;
			text-align: right;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 22rpx;
			color: #010101;
			margin-bottom: 75rpx;
		}
		
		.sbotview{
			margin: 100rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.shoufei{
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 22rpx;
				color: #010101;
				display: block;
				margin-bottom: 15rpx;


			}
			.btn{
				width: 100%;
				height: 80rpx;
				background: #030000;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
		// padding-bottom: 150rpx;
	}
</style>
